<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 组件名称
defineOptions({
  name: 'ImageConverter'
})

const router = useRouter()

interface ConversionOption {
  destination: string
  pathName: string
}

interface ConversionItem {
  source: string
  options: ConversionOption[]
}

const items: ConversionItem[] = [
  {
    source: 'jpg',
    options: [
      { destination: 'png', pathName: 'JpgToPng' }
    ]
  },
  {
    source: 'png',
    options: [
      { destination: 'ico', pathName: 'PngToIco' }
    ]
  }
]

const sourceList = items.map(item => item.source)
const selectedItem = ref<string>('')
const selectedTarget = ref<ConversionOption | null>(null)

// 处理目标格式变化
const handleTargetChange = (target: ConversionOption) => {
  selectedTarget.value = target
}

// 开始转换
const startConversion = () => {
  if (!selectedTarget.value) {
    ElMessage.error('请选择目标格式')
    return
  }

  // 跳转到对应的转换页面
  router.push({ name: selectedTarget.value.pathName })
}

// 快速选择
const quickSelect = (source: string, option: ConversionOption) => {
  selectedItem.value = source
  selectedTarget.value = option

  // 自动跳转
  setTimeout(() => {
    startConversion()
  }, 300)
}
</script>

<template>
  <div class="image-converter">
    <div class="header">
      <h1 class="title">图片格式转换</h1>
      <p class="subtitle">选择源格式和目标格式开始转换</p>
    </div>

    <div class="converter-selector">
      <div class="selector-container">
        <div class="selector-item">
          <label class="selector-label">源格式</label>
          <el-select v-model="selectedItem" placeholder="请选择源格式" size="large" class="format-select">
            <el-option v-for="item in sourceList" :key="item" :label="item.toUpperCase()" :value="item">
              <span class="option-text">{{ item.toUpperCase() }}</span>
            </el-option>
          </el-select>
        </div>

        <div class="arrow-container" v-if="selectedItem">
          <i class="el-icon-right arrow-icon"></i>
        </div>

        <div class="selector-item" v-if="selectedItem">
          <label class="selector-label">目标格式</label>
          <el-select v-model="selectedTarget" placeholder="请选择目标格式" size="large" class="format-select"
            @change="handleTargetChange">
            <el-option v-for="item in items.find(item => item.source === selectedItem)?.options" :key="item.destination"
              :label="item.destination.toUpperCase()" :value="item">
              <span class="option-text">{{ item.destination.toUpperCase() }}</span>
            </el-option>
          </el-select>
        </div>
      </div>

      <div v-if="selectedTarget" class="action-container">
        <el-button type="primary" size="large" @click="startConversion" class="start-button">
          开始转换
        </el-button>
      </div>
    </div>

    <!-- 支持的转换列表 -->
    <div class="supported-conversions">
      <h3>支持的转换格式</h3>
      <div class="conversion-grid">
        <div v-for="item in items" :key="item.source" class="conversion-card">
          <div class="card-header">
            <span class="source-format">{{ item.source.toUpperCase() }}</span>
          </div>
          <div class="card-body">
            <div class="arrow-down">↓</div>
            <div class="target-formats">
              <span v-for="option in item.options" :key="option.destination" class="target-format"
                @click="quickSelect(item.source, option)">
                {{ option.destination.toUpperCase() }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.image-converter {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.header {
  text-align: center;
  margin-bottom: 50px;
}

.title {
  font-size: 2.5rem;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #409eff, #67c23a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 1.1rem;
  color: #606266;
  margin: 0;
}

.converter-selector {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  margin-bottom: 50px;
}

.selector-container {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 30px;
  justify-content: center;
}

.selector-item {
  flex: 1;
  max-width: 250px;
}

.selector-label {
  display: block;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  font-size: 1rem;
}

.format-select {
  width: 100%;
}

.format-select :deep(.el-input__inner) {
  height: 50px;
  font-size: 16px;
  border-radius: 12px;
  border: 2px solid #e4e7ed;
  transition: all 0.3s;
}

.format-select :deep(.el-input__inner):focus {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.format-select :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: none;
  border: 2px solid #e4e7ed;
  transition: all 0.3s;
}

.format-select :deep(.el-input__wrapper):hover {
  border-color: #c0c4cc;
}

.format-select :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.option-text {
  font-weight: 500;
  font-size: 14px;
}

.arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
}

.arrow-icon {
  font-size: 24px;
  color: #409eff;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.action-container {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.start-button {
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #409eff, #67c23a);
  border: none;
  transition: all 0.3s;
}

.start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
}

.supported-conversions {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 40px;
}

.supported-conversions h3 {
  text-align: center;
  color: #303133;
  margin-bottom: 30px;
  font-size: 1.5rem;
  font-weight: 600;
}

.conversion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  justify-items: center;
}

.conversion-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #e4e7ed;
  transition: all 0.3s;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
}

.conversion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #409eff;
}

.card-header {
  text-align: center;
  margin-bottom: 16px;
}

.source-format {
  display: inline-block;
  background: linear-gradient(135deg, #409eff, #67c23a);
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
}

.card-body {
  text-align: center;
}

.arrow-down {
  font-size: 24px;
  color: #c0c4cc;
  margin: 12px 0;
}

.target-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.target-format {
  background: #f0f9ff;
  color: #409eff;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #e1f5fe;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}

.target-format:hover {
  background: #409eff;
  color: white;
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .image-converter {
    padding: 20px 15px;
  }

  .title {
    font-size: 2rem;
  }

  .converter-selector {
    padding: 20px;
  }

  .selector-container {
    flex-direction: column;
    gap: 20px;
  }

  .selector-item {
    max-width: 100%;
  }

  .arrow-container {
    transform: rotate(90deg);
  }

  .conversion-grid {
    grid-template-columns: 1fr;
  }

  .supported-conversions {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 1.8rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .format-select :deep(.el-input__inner) {
    height: 45px;
    font-size: 14px;
  }

  .start-button {
    padding: 10px 30px;
    font-size: 14px;
  }
}
</style>
